<template>
	<view class="login">
		<uni-section title="登录" type="square">
			<view class="example">
				<!-- 自定义表单校验 -->
				<uni-forms ref="form" :modelValue="customFormData">
					<uni-forms-item label="手机号" name="name">
						<uni-easyinput v-model="customFormData.phone" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="密码" name="xuehao">
						<uni-easyinput type="password" v-model="customFormData.password" placeholder="请输入密码" />
					</uni-forms-item>
					<view class="accont">
						<text>默认账号:18828895599</text>
						<text>默认密码:zxc123!</text>
					</view>
				</uni-forms>
				<button type="primary" @click="gotoother" style="background-color:#dc5a5a;">登录</button>
			</view>
		</uni-section>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 自定义表单数据
				customFormData: {
					phone: '',
					password: '',
					code: 'warmstill',
					uuid: 'wxlogin'
				},
				//自定义表单校验规则
				dynamicRules: {
					phone: {
						rules: [{
								// required: true,
								errorMessage: '请填写手机号码',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let iphoneReg = (
										/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
									); //手机号码
									if (!iphoneReg.test(value)) {
										callback('手机号码格式不正确，请重新填写')
									}
								}
							}
						]
					},
					password: {
						rules: [{
								format: 'string'
							},
							{
								validateFunction: function(value, data, callback) {
									if (value.length == 0) {
										callback('密码不能为空')
									}
									console.log(data)
								}
							}
						]
					}

				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.dynamicRules)
		},
		methods: {
			async gotoother() {
				// this.$refs.form.validate().then(res => {
				// 	console.log('表单信息', res)

				// }).catch(() => {
				// 	uni.showToast({
				// 		title: '请重新输入账号与密码'
				// 	})
				// })
				let res = this.$store.dispatch('Login', this.customFormData)
				console.log(res)
				res.then(() => {
					uni.showToast({
						title: '登录成功'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/FirstBefore/FirstBefore'
						})
					}, 500)
				}).catch(() => {
					uni.showToast({
						title: '登录失败，请重新登录'
					})
				})


			}

		},
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 750rpx;
		height: auto;

		.img-container {
			width: 200rpx;
			height: 200rpx;
			// background-color: antiquewhite;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.accont {
			width: 700rpx;
			height: 150rpx;
			margin-bottom: 20rpx;
			line-height: 50rpx;
			display: flex;
			flex-direction: column;
		}
	}
</style>
